<template>
  <div>
    <el-row :gutter="15">
      <el-form
        style="margin-top: 20px"
        :model="form"
        ref="ruleForm"
        :rules="rules"
        label-width="150px"
      >
        <el-form-item label="是否开启">
          <el-switch
            v-model="form.activeAccessControl"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </el-form-item>>
        <el-form-item label="平台选择">
          <el-radio-group v-model="form.platformSelection">
            <el-radio :label="0">云门禁</el-radio>
            <el-radio :label="1">pc门禁管理系统</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-col :span="13">
          <el-form-item label="服务器">
            <el-input
              v-model="form.platformUrl"
              placeholder="请输入服务器"
              :disabled="form.activeAccessControl == 0"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="端口" prop="platformPort">
            <el-input
              v-model.number="form.platformPort"
              type="number"
              placeholder="请输入端口"
              :disabled="form.activeAccessControl == 0"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="心跳时间" prop="reconnectInterval">
            <el-input
              v-model="form.reconnectInterval"
              type="number"
              placeholder="请输入心跳时间"
              @input="numberChange(arguments[0], 60)"
              :disabled="form.activeAccessControl == 0"
              clearable
            >
              <template slot="append">秒</template>
            </el-input>
          </el-form-item>
          <el-form-item :label="form.platformSelection==0?`连接云门禁方式`:`pc门禁管理系统`" prop="pcAccessMode">
            <el-radio-group v-model="form.pcAccessMode" v-if="form.platformSelection==0">
              <el-radio :label="0">无证书</el-radio>
              <el-radio :label="1">有证书</el-radio>
            </el-radio-group>
            <el-radio-group v-model="form.pcAccessMode" v-if="form.platformSelection==1">
              <el-radio :label="0">手动</el-radio>
              <el-radio :label="1">自动</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item size="large">
            <el-button type="primary" @click="onSubmit('ruleForm')">
              保存
            </el-button>
            <!-- <el-button>取消</el-button> -->
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { getAiotApi, editAiotApi } from "@/api/network";
export default {
  name: "cloudGate",
  data() {
    return {
      form: {
        activeAccessControl: "",
        bufferSize: "",
        id: "",
        iotVersion: "",
        mqttVersion: "",
        platformPort: "",
        platformUrl: "",
        reconnectInterval: 0,
        status: "",
        thingsVersion: "",
      },
      rules: {
        platformPort: [
          { required: true, message: "端口不能为空", trigger: "blur" },
          {
            pattern:
              /^([1-9][0-9]{0,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/,
            message: "请输入1-65535",
            trigger: "blur",
          },
        ],
        reconnectInterval: [
          { required: true, message: "心跳时间不能为空", trigger: "blur" },
          {
            pattern: /^([1-9]|[1-5][0-9]|60)$/,
            message: "请输入1-60",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getAiot();
  },
  mounted() {},

  methods: {
    numberChange(val, maxNum) {
      //转换数字类型
      this.form.reconnectInterval = Number(val);
      //重新渲染
      this.$nextTick(() => {
        //比较输入的值和最大值，返回小的
        let num = Math.min(Number(val), maxNum);
        //输入负值的情况下， = 0（可根据实际需求更该）
        if (num < 0) {
          this.form.reconnectInterval = 1;
        } else {
          //反之
          this.form.reconnectInterval = num;
        }
      });
    },
    getAiot() {
      getAiotApi().then((res) => {
        // console.log(res);
        this.form = res[0];
        // console.log(this.form);
      });
    },
    onSubmit(formName) {
      console.log(this.form.activeAccessControl);
      // if (this.form.activeAccessControl == 1) {
      //   this.rules.platformPort.push({
      //     required: true,
      //     message: "端口不能为空",
      //     trigger: "blur",
      //   });
      //   this.rules.reconnectInterval.push({
      //     required: true,
      //     message: "心跳时间不能为空",
      //     trigger: "blur",
      //   });
      // } else {
      //   if (this.rules.platformPort.length != 1) {
      //     this.rules.platformPort.splice(1);
      //   }
      //   if (this.rules.reconnectInterval.length != 1) {
      //     this.rules.reconnectInterval.splice(1);
      //   }
      // }
      this.$refs[formName].validate((valid) => {
        // debugger
        if (valid) {
          editAiotApi(this.form).then((res) => {
            console.log(res);
            this.form = { ...res[0] };
            this.$message.success("保存成功");
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
